<template>
    <div>
        <nav class="BreadcrumbBlock">
          <div class="flex">
            <div class="BreadItem" @click="$router.push('/auth')">IP授权</div>
            <div class="BreadItem active">查看申请进度</div>
          </div>
        </nav>
        <div class="contentBox">
          <div class="list-tableBox">
            <header class="list-header flex align-center">
                <div class="list-row-item list-num">序号</div>
                <div class="list-row-item list-wxname">企业微信名</div>
                <div class="list-row-item list-dept">所属部门</div>
                <div class="list-row-item list-project">项目名称</div>
                <div class="list-row-item list-useRange">使用范围</div>
                <div class="list-row-item list-desc">用途描述</div>
                <div class="list-row-item list-time">申请时间</div>
                <div class="list-row-item list-status">状态</div>
                <div class="list-row-item list-handle">操作</div>
            </header>
            <main class="list-main">
              <section class="list-row flex align-center" v-for="(item,index) in authList">
                <div class="list-row-item list-num">{{index+1}}</div>
                <div class="list-row-item list-wxname">{{item.wx_name}}</div>
                <div class="list-row-item list-dept">{{item.dept_name||'测试部门'}}</div>
                <div class="list-row-item list-project">{{item.project_name}}</div>
                <div class="list-row-item list-useRange">{{item.range_status== '1' ? '线上使用':'线下使用'}}</div>
                <div class="list-row-item list-desc">{{item.description}}</div>
                <div class="list-row-item list-time">{{item.create_time}}</div>
                <div class="list-row-item list-status">
                    <span class="text_warning" v-if="item.status==1||item.status==3||item.status==5||item.status==6" type="warning" :underline="false">{{formStatus(item.status)}}</span>
                    <span class="text_danger" v-if="item.status==2||item.status==4||item.status==7" type="danger" :underline="false">{{formStatus(item.status)}}</span>
                    <span class="text_primary" v-if="item.status==8" type="primary" :underline="false">{{formStatus(item.status)}}</span>
                </div>
                <div class="list-row-item list-handle">
                  <div v-if="item.status==2||item.status==4">
                    <span class="refuseKey" style="">拒绝原因：</span><br/>
                    {{item.cause}}
                  </div>
                  <div v-if="item.status==5||item.status==7">
                    <button  class="custom_primary_btn design_img_btn" round @click="ip_obj=item;ip_obj.design_img='';dialogVisible=true">上传设计稿</button>
                  </div>
                  <div v-if="item.status==6">
                    <span class="text_primary pointer" @click="ip_obj=item;dialogDesignVisible=true">{{item.img_name}}</span>
                  </div>
                  <div v-if="item.status==8">/</div>
                </div>
              </section>
            </main>
          </div>
            
        </div>

        <el-dialog
          title="上传设计稿"
          :visible.sync="dialogVisible"
          width="680px">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">上传设计稿</div>
              <i class="el-icon-close pointer" @click="dialogVisible=false"></i>
            </div>
          <section class="designImgBox flex justify-center" v-if="!ip_obj.design_img">
            <input type="file" id="designImg" class="none" @change='uploadImg($event)'>
            <label for="designImg" class="designImgLabel">
              <div class="designImgUploadBox flex justify-center align-center">
                <section class="center">
                  <i class="el-icon-plus" style="color:#E3E3E3"></i>
                  <div>添加图片</div>
                  <p>只支持JPG/PNG，大小不超过10M</p>
                </section>
              </div>
            </label>
          </section>
          <section v-else class="designImgBox flex justify-center">
            <img :src="ip_obj.design_img" alt="">
          </section>
          <span slot="footer" class="dialog-footer">
            <button class="custom_info_btn" @click="dialogVisible = false">取 消</button>
            <button class="custom_primary_btn" style="margin-left:10px" @click="changeStatus()">确 定</button>
          </span>
        </el-dialog>

        <el-dialog title="查看设计稿" width="680px" :visible.sync="dialogDesignVisible">
            <div class="dialog_title relative flex align-center justify-between">
              <div class="">查看设计稿</div>
              <i class="el-icon-close pointer" @click="dialogDesignVisible=false"></i>
            </div>
            <section class="designImgBox flex justify-center">
                <img :src="ip_obj.design_img" alt="">
            </section>
        </el-dialog>
        <div class="toastBox" v-show="toastFlag">{{toastMsg}}</div>
    </div>
</template>
<script>
    import {formatData} from '@/utils/index.js'
    export default {
        name:'authProgress',
        data(){
            return{
              authList:[],
              dialogVisible:false,
              dialogDesignVisible:false,
              ip_obj:{},
              toastFlag:false,
              toastMsg:''
            }
        },
        mounted(){
          this.getData();
        },
        methods:{
            getData(){
                let that = this;
                that.authList = [];
                this.$axios.get('/api/ipAuth/list').then((res)=>{
                  if(res.data.data && res.data.data.length>0){
                    res.data.data.forEach(item=>{
                      item.create_time = formatData(item.create_time)
                      if(item.design_img){
                        let url = item.design_img
                        item.img_name = url.substring(url.lastIndexOf('/') + 1)
                      }
                      
                    })
                    that.authList = res.data.data
                  }
                  
                })
            },
            formStatus(key){
              switch (key) {
                case 1:
                  return '等待设计审核'
                case 2:
                  return '设计审核未通过'
                case 3:
                  return '等待授权审核'
                case 4:
                  return '授权审核未通过'
                case 5:
                  return '等待上传设计稿'
                case 6:
                  return '等待设计稿审核'
                case 7:
                  return '设计稿审核未通过'
                case 8:
                  return '设计稿审核已通过'
                default:
                  return "未知"
              }
            },
            uploadImg(e){	//上传图片
              let that = this;
              let file = e.target.files[0];
              let fileName = file.name;
              let data = new FormData()
              data.append('design_img', fileName)
              data.append('img', file)
              this.$axios.post('/api/uploadFile',data).then((res)=>{
                if(res.data.code == 200){
                  that.ip_obj.design_img = res.data.src;
                  that.$set(that.ip_obj,that.ip_obj.design_img,res.data.src)
                  that.toastFlag = true;
                  that.toastMsg = '图片上传成功',
                  setTimeout(function(){
                    that.toastFlag = false;
                  },1000)

                }
              })
            },
            changeStatus(){
              let that = this;
              if(!that.ip_obj.design_img) return
              this.dialogVisible = false;
              that.ip_obj.status=6
              this.$axios.post('/api/ipAuth/examine',that.ip_obj).then(res => {
                  that.toastFlag = true;
                  that.toastMsg = '设计稿上传成功',
                  setTimeout(function(){
                    that.toastFlag = false;
                  },1000)

              })
            }
        }
    }
</script>
<style scoped lang='less'>
  /deep/ .el-dialog{
      padding: 28px !important;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin: 0 auto 50px !important;
  }
  /deep/ .el-dialog__header{
    display: none !important;
  }
  /deep/ .el-dialog__body{
    padding: 0 !important;
  }
  .dialog_title{
    font-size: 20px;
    color: #000000;
    letter-spacing: 0;
    line-height: 16px;
    opacity: 0.95;
    font-weight: 500;
    margin-bottom: 20px;
    i{
      color: #E3E3E3;
    }
  }
  /deep/ .el-dialog__footer{
    padding: 0;
    margin-top: 20px;
  }
  // /deep/ .dialog-footer{
  //   margin-top: 20px;
  // }

    .contentBox{
        padding: 0 !important;
        background: #FFFFFF;
        box-shadow: 0 -5px 20px 0 rgba(0,0,0,0.05);
        // min-height: 74vh;
        height: 1317px;
    }
    .list-tableBox{
      width: 100%;
      height: 100%;
      .list-header{
        height: 60px;
        padding: 0 20px 0 20px;
        background: #f4f6fa;
        font-size: 18px;
        color: rgba(0,0,0,0.95);
      }
      .list-main{
        padding: 0 20px;
        height: calc(100% - 60px);
        overflow-y: auto;
        .list-row{
          padding: 20px 0;
          border-bottom: 1px solid #E3E3E3;
          font-size: 16px;
          &:nth-last-child(1){
            border-bottom: none;
          }
          .text_warning{
            color: #F38F00;
          }
          .text_danger{
            color: #FF3232;
          }
          .text_primary{
            color: #0064FF;
          }
        }
      }
      .list-main::-webkit-scrollbar { 
          width: 10px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
          background: #fff;
      }
      /*定义滚动条轨道（凹槽）样式*/ 
      .list-main::-webkit-scrollbar-track { 
          // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
          border-radius: 5px; 
      } 
        /*定义滑块 样式*/ 
      .list-main::-webkit-scrollbar-thumb { 
        border-radius: 5px; 
        height: 100px;    /* 滚动条滑块长度 */
        background-color: #95A5B6;
      }
      .list-row-item{
        padding:0 15px;
        box-sizing: border-box;
      }
      .list-num{
        min-width: 92px;
        width: 8%;
      }
      .list-wxname{
        min-width: 235px;
        width: 15%;
      }
      .list-dept{
        min-width: 236px;
        width: 15%;
      }
      .list-project{
        min-width: 209px;
        width: 13%;
      }
      .list-useRange{
        min-width: 136px;
        width: 10%;
      }
      .list-desc{
        min-width: 315px;
        width: 14%;
      }
      .list-time{
        min-width: 155px;
        width: 11%;
      }
      .list-status{
        min-width: 184px;
        width: 16%;
      }
      .list-handle{
        min-width: 178px;
        width: 16%;
      }

    }
    .refuseKey{
      color:#000;
      opacity: 0.5;
      font-size: 16px;
      line-height: 28px;
    }
    .designImgLabel{
      width: 100%;
      height: 400px;
    }
    .designImgUploadBox{
        border: 2px dashed #ddd;
        border-radius: 5px;
        width: 100%;
        height: 100%;
      
      i{
        font-size: 40px;
        color: #ddd;
      }
      p{
        line-height: 20px;
      }
    }
    .designImgBox{
      width: 100%;
      height: 400px;
      margin: 0 auto;
      img{
        max-width: 100%;
        max-height: 100%;
      }
    }


    .custom_primary_btn.design_img_btn{
        width: 130px;
    }
</style>